import { useState } from 'react';
import { X, Sliders, Palette, Eye, Sparkles } from 'lucide-react';
import { Effect } from '@/types/video';

interface EffectsPanelProps {
  className?: string;
  effects: Effect[];
  onAddEffect: (effectType: string) => void;
  onRemoveEffect: (effectId: string) => void;
  onUpdateEffect: (effectId: string, updates: Partial<Effect>) => void;
}

const EffectsPanel: React.FC<EffectsPanelProps> = ({ 
  className, 
  effects, 
  onAddEffect, 
  onRemoveEffect, 
  onUpdateEffect 
}) => {
  const [activeEffect, setActiveEffect] = useState<string | null>(null);

  // 特效预设
  const effectPresets = [
    {
      id: 'color_correction',
      name: '色彩校正',
      icon: Palette,
      description: '调整亮度、对比度、饱和度',
      parameters: [
        { name: 'brightness', label: '亮度', type: 'range', min: -100, max: 100, value: 0 },
        { name: 'contrast', label: '对比度', type: 'range', min: -100, max: 100, value: 0 },
        { name: 'saturation', label: '饱和度', type: 'range', min: -100, max: 100, value: 0 },
      ]
    },
    {
      id: 'blur',
      name: '模糊效果',
      icon: Eye,
      description: '应用高斯模糊效果',
      parameters: [
        { name: 'intensity', label: '强度', type: 'range', min: 0, max: 10, value: 3 },
      ]
    },
    {
      id: 'sharpen',
      name: '锐化',
      icon: Sparkles,
      description: '增强图像细节',
      parameters: [
        { name: 'amount', label: '锐化程度', type: 'range', min: 0, max: 5, value: 1 },
      ]
    },
    {
      id: 'noise_reduction',
      name: '降噪',
      icon: Sliders,
      description: '减少视频噪点',
      parameters: [
        { name: 'strength', label: '降噪强度', type: 'range', min: 0, max: 10, value: 5 },
      ]
    }
  ];

  const renderEffectParameters = (effectId: string, effectType: string) => {
    const preset = effectPresets.find(p => p.id === effectType);
    const effect = effects.find(e => e.id === effectId);
    
    if (!preset || !effect) return null;

    return (
      <div className="effect-parameters">
        {preset.parameters.map(param => (
          <div key={param.name} className="parameter-item">
            <label className="parameter-label">{param.label}</label>
            <div className="parameter-controls">
              <input
                type="range"
                min={param.min}
                max={param.max}
                value={effect.parameters[param.name] || param.value}
                onChange={e => onUpdateEffect(effectId, {
                  parameters: { ...effect.parameters, [param.name]: Number(e.target.value) }
                })}
                className="parameter-slider"
              />
              <span className="parameter-value">
                {effect.parameters[param.name] || param.value}
              </span>
            </div>
          </div>
        ))}
      </div>
    );
  };

  return (
    <div className={`effects-panel ${className || ''}`}>
      <div className="panel-header">
        <h3 className="panel-title">
          <Sliders size={20} />
          特效面板
        </h3>
        <p className="panel-description">为选中的剪辑添加和调整特效</p>
      </div>

      {/* 特效列表 */}
      <div className="effects-list">
        {effects.map(effect => {
          const preset = effectPresets.find(p => p.id === effect.type);
          const PresetIcon = preset?.icon || Sliders;
          
          return (
            <div key={effect.id} className="effect-item">
              <div 
                className="effect-header"
                onClick={() => setActiveEffect(activeEffect === effect.id ? null : effect.id)}
              >
                <div className="effect-info">
                  <div className="effect-icon">
                    <PresetIcon size={16} />
                  </div>
                  <div className="effect-details">
                    <span className="effect-name">{preset?.name || effect.name}</span>
                    <span className="effect-status">
                      {effect.enabled ? '启用' : '禁用'}
                    </span>
                  </div>
                </div>
                <div className="effect-actions">
                  <button
                    className={`toggle-btn ${effect.enabled ? 'enabled' : 'disabled'}`}
                    onClick={(e) => {
                      e.stopPropagation();
                      onUpdateEffect(effect.id, { enabled: !effect.enabled });
                    }}
                  >
                    {effect.enabled ? '启用' : '禁用'}
                  </button>
                  <button
                    className="remove-btn"
                    onClick={(e) => {
                      e.stopPropagation();
                      onRemoveEffect(effect.id);
                    }}
                  >
                    <X size={14} />
                  </button>
                </div>
              </div>
              
              {activeEffect === effect.id && (
                <div className="effect-controls">
                  {renderEffectParameters(effect.id, effect.type)}
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* 添加特效按钮 */}
      <div className="add-effects">
        <h4 className="add-title">添加特效</h4>
        <div className="effects-grid">
          {effectPresets.map(preset => {
            const PresetIcon = preset.icon;
            
            return (
              <button
                key={preset.id}
                className="effect-preset-btn"
                onClick={() => onAddEffect(preset.id)}
                title={preset.description}
              >
                <div className="preset-icon">
                  <PresetIcon size={20} />
                </div>
                <span className="preset-name">{preset.name}</span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default EffectsPanel;